<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义组件</title>
</head>
<body>
    <div id="div">
        <my-button></my-button>
        <my-button></my-button>
        <my-button></my-button>
        <my-button></my-button>

        <my-button1 :data="info"></my-button1>


        <my-li :lidatas="lis"></my-li>
    </div>

</body>
<script src="js/vue.js"></script>
<script>
    //预定义数据使用过程中改变不了数据
    Vue.component("my-button",{
        data:function(){
            return{
                msg:"我是按钮1"
            }
        },
        template:"<button style=\"color:red\">{{msg}}</button>"
    });
    //动态数据
    Vue.component("my-button1",{
        props:["data"],
        template:"<button style=\"color:red\">{{data}}</button>"
    });
    Vue.component("my-li",{
        props:["lidatas"],
        template:"<ul>\n" +
            "    <li v-for='lid in lidatas'>{{lid}}</li>\n" +
            "</ul>"
    });
    new Vue({
        el:"#div",
        data:{
            info:"xxx111",
            lis:["1","2","3","4","5"]
        }
    });
</script>
</html>